<template>
    <div class="box">
        <div>
            <van-nav-bar left-arrow @click-left="proxy.$leftClick()">
                <template #left>
                    <van-icon name="arrow-left" size="18" />
                </template>
                <template #title>
                    <van-tabs v-model:active="active" @click-tab="clickTab">
                        <van-tab title="商品">
                        </van-tab>
                        <van-tab title="详情"></van-tab>

                    </van-tabs>
                </template>
                <template #right>
                    <van-popover v-model:show="showPopover" :actions="actions" placement="bottom-end" @select="selectData">
                        <template #reference>
                            <van-icon name="ellipsis" size="18" />
                        </template>
                    </van-popover>
                </template>
            </van-nav-bar>
        </div>
        <detailLeft v-if="store.names == 0"></detailLeft>
        <detailRight v-else></detailRight>
        <!-- 底部菜单 -->
        <van-action-bar>
            <van-badge>
                <van-action-bar-icon icon="chat-o" text="评论" @click="onPj" />
            </van-badge>
            <van-badge :content="gouwu.userGouwu?gouwu.userGouwu.length:0">
                <van-action-bar-icon icon="cart-o" text="购物车" @click="tiaozhuan" />
            </van-badge>

            <van-action-bar-button type="warning" text="加入购物车" @click="addData" />
            <van-action-bar-button type="danger" text="立即购买" @click="zong" />
        </van-action-bar>

        <!-- 分享菜单 -->
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

    </div>
</template>

<script setup lang="ts">
import detailLeft from '../components/detaiLeft.vue'
import detailRight from '../components/detailRight.vue'
import { ref, onBeforeMount, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { showToast } from 'vant'

import { useProductStore } from '@/store/product';
import { useGouwu } from '@/store/gouwu';
let store = useProductStore();
let gouwu = useGouwu();
const { proxy }: any = getCurrentInstance()
let showPopover = ref(false);
let router = useRouter();
let route = useRoute();


const onPj = ()=>{
    router.push({name:'pj',params:{id:route.params.id}})
}
// 标签栏
let active = ref(0);
// 是否显示分享模块
const showShare = ref(false);
// 分享的内容
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
]
// 点击分享模块内容
const onSelect = (option: { name: string, icon: string }) => {
    showToast(option.name);
    showShare.value = false;
};

const actions = [
    { text: '首页', icon: 'home-o' },
    { text: '购物车', icon: 'cart-o' },
    { text: '分享', icon: 'share-o' },
]
type actions = {
    text: string,
    icon: string
}

// 当点击右上角选项
const selectData = (actions: actions, index: number) => {
    index == 0 && router.push({ name: 'admin' });
    index == 1 && router.push({ name: 'gouwu' });
    (actions.text == '分享') && (showShare.value = true)
}

// 当组件加载前拉取单条数据
onBeforeMount(async () => {
    store.fetchDetailData(route.params.id as string);
})

// 当点击去切换栏
const clickTab = (v: { name: number }) => {
    store.fetchChangeComponent(v.name);

}
// 点击添加购物车
const addData = async () => {
    await store.addData();
    await gouwu.fecthGetData()
    
    if (store.fanhui) {
        router.push({ name: 'denglu' })
    }
}
// 点击跳转财购物车
const tiaozhuan = () => {
    router.push({ name: 'gouwu' })
}

// 点击立即购买
const zong = async () => {
    await addData()
    tiaozhuan()
}
</script>

<style scoped>
.box {
    height: 100vh;
    width: 100vw;
    background-color: #4b544b1f;
}
</style>